// 在浏览器环境中，需要从全局 Vue 对象解构
// 或者使用 CDN 的完整路径
const { ref, onMounted, onUnmounted } = Vue;

import { useEventListener } from './useMouse.js'

// 按照惯例，组合式函数名以“use”开头
export function useMouse() {
  // 被组合式函数封装和管理的状态
  const x = ref(0)
  const y = ref(0)

  // 组合式函数可以随时更改其状态。
  // function update(event) {
  //   x.value = event.pageX
  //   y.value = event.pageY
  // }

  // 一个组合式函数也可以挂靠在所属组件的生命周期上
  // 来启动和卸载副作用
  // onMounted(() => window.addEventListener('mousemove', update))
  // onUnmounted(() => window.removeEventListener('mousemove', update))

  useEventListener(window,'mousemove',(e) => {
    x.value = e.pageX
    y.value = e.pageY
  })


  // 通过返回值暴露所管理的状态
  return { x, y }
}